<template>
  <PageContainer>
    <view class="container">
      <Header
        title="申请跨会记录"
        v-model="headerHeight"
        :z-index="headerZindex"
        :is-box-shadow="false"
      />
      <view class="py-10 px-16 disFlx gap-8" style="background-color: #fff4e7; color: #e29942">
        <text class="ali-icon fz-16">&#xe699;</text>
        <text class="flex-1 fz-14 linh-20">
          本页面可查看您作为管理人或您审核申请跨会推广的记录，跨会推广可以让更多组织推广供需合作。
        </text>
      </view>
      <view class="py-6 px-16 bgf">
        <view class="flex-1" style="height: 72rpx">
          <TSearch placeholder="搜索供需名称" @confirm="searchConfirm"></TSearch>
        </view>
      </view>
      <view class="tabs-box" :style="{ top: headerHeight + 'px' }">
        <view class="tab">
          <Tabs
            v-model="currentTab"
            background-color="#FFF"
            :isScrollTop="false"
            @change="changeTab"
          >
            <TabNav tabBarColor="#2878FF" />
            <template v-if="tabsData?.length">
              <TabsItem
                v-for="(item, index) in tabsData"
                :key="index"
                :name="item.title"
                :value="item.id"
              >
                <template></template>
              </TabsItem>
            </template>
          </Tabs>
        </view>
      </view>
      <Paglist
        v-model="dataList"
        :is-init-api="true"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
        :is-show-loadmore="dataList.length >= 1"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="list-item">
            <CrossClubRecordsItem :data="v"></CrossClubRecordsItem>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* crossClubRecords 跨会记录 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { provide, reactive, ref } from 'vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import type { ICrossClubRecords, ICrossClubRecordsQuery } from '@/api/businessOpportunities/type';
  import { boPromotionReviewList } from '@/api/businessOpportunities';
  import CrossClubRecordsItem from './components/CrossClubRecordsItem.vue';
  import { ReviewStatus } from '@/enums/businessOpportunitiesEnum';

  const headerHeight = ref(0);
  const headerZindex = ref(999);

  const currentTab = ref(undefined);
  const tabsData = ref<
    {
      title: string;
      id: number | undefined;
    }[]
  >([
    {
      title: '全部',
      id: undefined,
    },
    {
      title: '待审核',
      id: ReviewStatus.Pending,
    },
    {
      title: '已通过',
      id: ReviewStatus.Approved,
    },
    {
      title: '已驳回',
      id: ReviewStatus.Rejected,
    },
  ]);

  const parame = reactive<ICrossClubRecordsQuery>({
    keyWord: '',
    current: 1,
    size: 10,
    reviewStatus: undefined,
  });

  const changeTab = (reviewStatus: ReviewStatus | undefined) => {
    parame.reviewStatus = reviewStatus;
    refresh();
  };
  provide('api', async (obj: ICrossClubRecordsQuery) => {
    const res = await boPromotionReviewList(obj);
    return res;
  });
  const dataList = ref<ICrossClubRecords[]>([]);

  const [register, { refresh }] = useConList();

  const searchConfirm = (keyWord: string) => {
    parame.keyWord = keyWord;
    refresh();
  };
</script>

<style lang="scss" scoped>
  .container {
    .tabs-box {
      position: sticky;
      background-color: #ffffff;
      z-index: 999;
    }
    .list-item {
      padding: 0 30rpx;
      margin-bottom: 30rpx;
      &:nth-child(1) {
        padding-top: 30rpx;
      }
    }
  }
</style>
